<template>
	<!-- <view></view> -->
	<view class="high-list-wrapper">
		<u-search placeholder="请输入" v-model="form.name" @change="searchList" @search="searchList" @custom="searchList"></u-search>
		<view class="high-wrapper">
			<view class="high-item-wrapper">
				<view class="hight--item" v-for="(item, index) in tableData" :key="index">
				<view class="high-item" @click="linkToPerson(item)">
					<view class="item-left">
						<img class="head-image" :src="`${$store.state.img_url}${item.avatar}`" alt="" srcset="">
						<image v-if="item.starFlag =='1'"  class="daka-image" src="/static/img/daka.png" mode=""></image>
						
					</view>
					<view class="item-right">
						<view class="title">
							{{item.nickName}}
							<u-icon size="40" class="eye-image" name="woman" v-if="item.sex =='2'" color="#4D5B80" ></u-icon>		
							<u-icon size="40" class="eye-image" name="man" v-if="item.sex =='1'" color="#4D5B80" ></u-icon>	 
						</view>
						<view class="text">
							医院：{{item.hospitalId_dictText}}
						</view>
						<view class="text">
							科室：{{item.depId_dictText}}
						</view>
						<view class="text">
							职务：{{item.post_dictText}}
						</view>
						<view class="text">
							职称：{{item.professionalTitle_dictText}}
						</view>
						<template v-if="item.id !== $store.state.userInfo.id">
						<view class="attention " v-if="item.attentionFlag === '1'">
							已关注
						</view>
						<view class="attention attention-over" v-if="item.attentionFlag === '0'" @click.stop="onFollow(item)">
							关注
						</view>
						<img @click.stop="linkTo(item)" class="talk-image" src="/static/img/self-talk.png" alt="" srcset="">
						</template>

					</view>
				</view>
				
				<view class="hight-item-bootom">
					<view class="text">粉丝数：{{item.attentionNum}}</view>
					<view class="text text-right">获赞数：{{item.thumbsNum}}</view>
				</view>
				</view>
			</view>
			<u-loadmore v-if="tableData.length>= form.pageSize" class="load-more-wrapper" :status="loadStatus" @loadMore="loadMoreHandle"  bgColor="#ffffff"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import apis from '@/apis.js'
	export default {
  components: {  },
		data() {
			return {
				loadStatus: 'loadmore',
				form: {
					pageNo: 1,
					pageSize: 20,
					name: ""
				},
				tableData: []
			};
		},
		methods: {
			linkToPerson(itemData) {
				console.log("itemData", itemData)
				this.$u.route({ 
					url: "pages/tabbar/tabbar-1/personHome",
					params: {
						id: itemData.id
					}
				})
			},
    linkTo(item) {
			let userInfo = this.$store.state.userInfo
			if (userInfo.authenticationFlag === '2' || userInfo.starFlag === '1') {
				this.$u.route("pages/tabbar/tabbar-1/direct-message", {
				  id: item.id,
				  name: item.nickName,
				});
			} else {
				uni.showModal({
				  title: '提示',
				  content: '认证后才能进行该操作，是否前往认证？',
				  success(res) {
				    if (res.confirm) {
				      uni.navigateTo({
				      	url: '/pages/authentication/remind?auditType=1'
				      })
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			}
    },
			// 关注
			onFollow(item) {
				this.$http.post(apis.attention, { authorId: item.id }).then(res => {
					if (res.data.code === 200) {
						
						this.tableData.forEach((el, i) => {
							if (el.id === item.id) {
								
								el.attentionFlag = "1"
								this.$refs.uTips.show({
									title: '关注成功',
									type: 'success',
									duration: '2300'
								})
							}
						})
					}
				})
			},
			searchList() {
				this.pageNo = 1
				this.tableData = []
				this.getList()
			}, 
			// 无限加载 利用公共方法判断
			onReachBottom() {
				this.pageNo = this.pageNo + 1
				this.getList()
			},
			loadMoreHandle() {
				this.pageNo = this.pageNo + 1
				this.getList()
			},
			getList() {
				this.loadStatus='loading';
				this.$http.get(apis.user_pageList, {
					...this.form,
					userType: "1"
				}).then(res => {
					if (res.data.code === 200) {
						if (this.form.pageNo == 1) {
							this.tableData = []
						}
						let data = this.tableData.concat(res.data.result.records)
						this.tableData = data
						if (res.data.result.total === this.tableData.length) {
							this.loadStatus = "nomore"
							this.isDot = true
						} else {
							this.loadStatus = "loadmore"
							this.isDot = false
						}
					}
				})
			},
		},
		onload() {
		},
		onShow() {
			console.log("this.$", this.$store.state)
			this.form.pageNo = 1
			this.getList()
			uni.setNavigationBarTitle({
				title: '大咖列表'
			})
		},
	}
</script>

<style scoped lang="scss">
@import "uview-ui/index.scss";
.eye-image {
	margin-left: 20rpx;
}
.high-list-wrapper {
	padding: 24rpx 30rpx;
	.high-wrapper {
		margin-top: 24rpx;
		.high-item-wrapper {
			opacity: 1;
			border-radius: 8rpx;
		}
		.hight--item {
			background: #EFF1F7;
			margin-bottom: 16rpx;

		}
		.high-item {
			display: flex;
			align-items: flex-start;
			padding: 60rpx 50rpx ;
			padding-bottom: 0;
			position: relative;
			border-bottom: 2rpx solid #BFBFBF;
				.attention {
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #E9EBF4;
					box-shadow: -4rpx -4rpx 12rpx #FFFFFF;
					opacity: 1;
					border-radius: 8rpx;
					position: absolute;
					top: 48rpx;
					right: 78rpx;
					font-size: 24rpx;
					font-family: SimHei;
					font-weight: 400;
					color: #4D5B80;
					opacity: 1;
					&.attention-over {
						background: #3FA7FF;
						color: #E9EBF4;
					}
				}
				.talk-image {
					position: absolute;
					top: 48rpx;
					right: 14rpx;
					width: 40rpx;
					height: 40rpx;
				}
			.item-left {
				margin-right: 28rpx;
				position: relative;
				.daka-image {
				position: absolute;
				width: 94rpx;
				height: 40rpx;
				bottom: 0;
				right: 10px;
			}
			}
			.head-image {
				width: 120rpx;
				height: 120rpx;
				background: #4D5B80;
				border-radius: 50%;
				opacity: 1;
			}
			.item-right {
				display: flex;
				flex-direction: column;
				.title {
					font-size: $title-font;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #4D5B80;
					margin-bottom: 16rpx;
				}
				.text {
					margin-bottom: 16rpx;
					font-size: $artical-title-font;
					font-family: SimHei;
					font-weight: 400;
					color: #4D5B80;
					opacity: 1;
				}
			}
		}
		.hight-item-bootom {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			.text {
				font-size: 24rpx;
				font-family: SimHei;
				font-weight: 400;
				color: #4D5B80;
				opacity: 1;
			}
			.text-right {
				margin-left: 128rpx;
			}
		}
	}
}
</style>
